<!--
 * @Descripttion: 
 * @LastEditors: xzh
 * @LastEditTime: 2023-11-21 23:53:37
-->
<template>
  <el-card>
    <template #header>
      <DileTooltip
        :content="
          $t(
            `page.dashboardManageArr.produceDashboard.outputCountArr.${dataType}`
          )
        "
      />
      <el-date-picker
        v-model="dateValue"
        unlink-panels
        type="daterange"
        :start-placeholder="$t('common.statrDate')"
        :end-placeholder="$t('common.endDate')"
        :shortcuts="Dile_Methods.getShortcuts()"
        size="small"
        @change="init"
      />
    </template>
    <!-- 推移图 -->
    <TrendChart ref="trendChartRef" />
  </el-card>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { dayjs } from "element-plus";
import { object_Inf } from "@/utils/typings/index.type";
import Dile_Methods from "@/utils/methods";
import DileTooltip from "@/components/dile-tooltip/index.vue";
import TrendChart from "../index.vue";

const props = defineProps({
  dataType: {
    type: String,
    requited: true,
    default: "",
  },
});
/**
 * @Author: xzh
 * @Descripttion: 推移图实例
 * @Param:
 */
let trendChartRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 日期筛选
 * @Param:
 */
let dateValue = ref<any>([dayjs().startOf("month"), dayjs().endOf("month")]);

onMounted(() => {
  init();
});

/**
 * @Author: xzh
 * @Descripttion: 初始化加载
 * @Param:
 * @param {*} param
 */
let init = () => {
  let { dataType } = props;
  //加载图表信息
  trendChartRef.value.init({
    dataType,
    dateValue,
    isAll: true,
  });
};
</script>
<style lang="scss" scoped>
.el-card {
  :deep(.el-card__header) {
    justify-content: space-between;
    align-items: center;
    > .el-date-editor {
      flex: 12.2rem 0 0;
    }
    > span {
      height: 1.5rem;
    }
  }
}
</style>
